/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* You can override the default Infima variables here. */

.debug {
	border: 2px solid red;
}

.lib-logo > path {
	color: white !important;
}

.header-github-link::before {
	display: flex;
	background-repeat: no-repeat;
	background-position: center;
	height: 1.5rem;
	width: 1.5rem;
	content: "";
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%200c-6.626%200-12%205.373-12%2012%200%205.302%203.438%209.8%208.207%2011.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729%201.205.084%201.839%201.237%201.839%201.237%201.07%201.834%202.807%201.304%203.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931%200-1.311.469-2.381%201.236-3.221-.124-.303-.535-1.524.117-3.176%200%200%201.008-.322%203.301%201.23.957-.266%201.983-.399%203.003-.404%201.02.005%202.047.138%203.006.404%202.291-1.552%203.297-1.23%203.297-1.23.653%201.653.242%202.874.118%203.176.77.84%201.235%201.911%201.235%203.221%200%204.609-2.807%205.624-5.479%205.921.43.372.823%201.102.823%202.222v3.293c0%20.319.192.694.801.576%204.765-1.589%208.199-6.086%208.199-11.386%200-6.627-5.373-12-12-12z%22%2F%3E%3C%2Fsvg%3E");
}

.navbar {
	background-color: #fafaf9 !important;
	box-shadow: 0px 1px #e7e5e4 !important;
}

.navbar__brand::after {
	content: "v8";
	margin-left: 0.5rem;
	font-weight: 500;
	position: relative;
	top: -0.4rem;
	font-size: 90%;
}

div[role="banner"] > button > svg {
	color: #ffffff;
}

#sponsors-container,
#sponsors-container > table,
#sponsors-container > table > tr,
#sponsors-container > table > tr > td {
	border: none !important;
}

#sponsors-container > table > tr {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}

#sponsors-container img {
	border-radius: 0.5rem;
}

:root {
	--ifm-font-family-base: "Inter";
	--ifm-heading-font-family: "Inter";
	--ifm-color-primary: #0976a8;
	--ifm-color-primary-dark: #086795;
	--ifm-color-primary-darker: #07608c;
	--ifm-color-primary-darkest: #064f73;
	--ifm-color-primary-light: #0a85bb;
	--ifm-color-primary-lighter: #0b8bc4;
	--ifm-color-primary-lightest: #0c98d9;
	--ifm-color-primary-lightest: #1ba7e8;
	--ifm-code-font-size: 95%;
	--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
	--ifm-background-color: #fafaf9 !important;
	--ifm-color-emphasis-200: #e7e5e4 !important;
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme="dark"] {
	--ifm-color-primary: #2ddbf7;
	--ifm-color-primary-dark: #11d6f6;
	--ifm-color-primary-darker: #09cdef;
	--ifm-color-primary-darkest: #08a9c5;
	--ifm-color-primary-light: #49dff8;
	--ifm-color-primary-lighter: #57e2f9;
	--ifm-color-primary-lightest: #81e9fa;
	--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
	--ifm-background-color: #18181b !important;
	--ifm-color-emphasis-200: #2b2e33 !important;

	--docusaurus-highlighted-code-line-bg: #363b44;

	.header-github-link::before {
		filter: invert(1);
	}

	.navbar {
		background-color: #191a1d !important;
		box-shadow: 0px 1px #2b2e33 !important;
	}
}

video {
	max-width: 900px;
	width: 100%;
	height: auto;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
	display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}

.embla {
	overflow: hidden;
}
.embla__container {
	@apply flex;
}
.embla__slide {
	flex: 0 0 100%;
	min-width: 0;
	margin-right: 15px;
}

@media (min-width: 670px) {
	.embla__slide {
		flex: 0 0 50%; /* Breakpoint SM slide covers 50% of the viewport */
	}
}

@media (min-width: 1200px) {
	.embla__slide {
		flex: 0 0 30%; /* Breakpoint SM slide covers 50% of the viewport */
	}
}
